<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSSH 终端</title>
    <link rel="Shortcut Icon" href="./ico/logo.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/styles.css">
    <link rel="stylesheet" href="./css/xterm.min.css">
    <!-- <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap" rel="stylesheet"> -->
    <link rel="stylesheet" href="./css/css2.css">
</head>

<body>
    <!-- Background elements -->
    <div class="bg-shapes">
        <div class="shape shape-circle" style="width: 300px; height: 300px; top: -100px; left: -50px;"></div>
        <div class="shape shape-square" style="width: 200px; height: 200px; top: 50%; right: -50px;"></div>
        <div class="shape shape-circle" style="width: 150px; height: 150px; bottom: -50px; right: 100px;"></div>
    </div>

    <!-- 登录界面 -->
    <div class="login-container" id="login-container">
        <h2>WebSSH 登录</h2>
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" id="password" placeholder="请输入密码">
        </div>
        <div class="remember-me">
            <input type="checkbox" id="remember" checked>
            <label for="remember">记住登录信息</label>
        </div>
        <button id="login-btn">登录</button>
        <div class="error-message" id="error-message"></div>

        <div class="history-list" id="history-list">
            <h3>历史记录</h3>
            <div id="history-items"></div>
        </div>
    </div>

    <!-- 终端界面 -->
    <div class="terminal-container" id="terminal-container">
        <div class="terminal-header">
            <span>WebSSH 终端 <span class="status-indicator" id="status-indicator"></span></span>
            <div class="terminal-controls">
                <button id="download-btn"><i class="fas fa-download"></i> 导出</button>
                <button id="disconnect-btn"><i class="fas fa-plug"></i> 断开</button>
                <button id="clear-btn"><i class="fas fa-eraser"></i> 清屏</button>
            </div>
        </div>
        <div id="terminal"></div>
        <div class="footer-info">安全连接 | 加密传输 | v1.2.1</div>
    </div>
    <script src="./js/xterm.min.js"></script>
    <script src="./js/xterm-addon-fit.min.js"></script>
    <script src="./js/xterm-addon-web-links.min.js"></script>
    <script src="./js/fontawesome.js" crossorigin="anonymous"></script>

    <script src="./js/script.js"></script>

</body>

</html>